<template>
  <div class="menu-manage-page">
    <div class="header-box">
      <el-row>
        <el-col :span="2">
          <el-button v-permission="'systemMenu:new'" type="primary" @click="addMenu">新增菜单</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="table-container">
      <div class="table-box">
        <el-table
          :data="tableData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column label="菜单名称" prop="name" align="left" />
          <el-table-column label="菜单类型" prop="name" align="center">
            <template slot-scope="scope">
              <el-tag :type="tagTypeMap[scope.row.type]">{{ menuType[scope.row.type] }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="图标" prop="name" align="center">
            <template slot-scope="scope">
              <i :class="scope.row.icon" />
            </template>
          </el-table-column>
          <el-table-column label="组件" prop="component" align="center" />
          <el-table-column label="路由地址" prop="router" align="center" />
          <el-table-column label="排序" prop="sort" align="center" />
          <el-table-column label=" 操作" width="240" align="center">
            <template slot-scope="scope">
              <el-button v-permission="'systemMenu:edit'" type="warning" size="mini" @click="editMenu(scope.row)">编辑</el-button>
              <el-button v-permission="'systemMenu:delete'" type="danger" size="mini" @click="deleteMenu(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <menu-edit-form ref="menuEditFormRef" :form-data="currentFormData" @callback="getTableData" @clearPropForm="currentFormData = null"/>
  </div>
</template>
<script>
import { DelMenu, GetMenuList } from '@/api/system';
import { MENU_TYPE_MAP } from '@/constant';
import MenuEditForm from '@/components/menuList/menuEdit';
export default {
  name: 'SystemMenu',
  components: {
    MenuEditForm
  },
  data() {
    return {
      tableData: [],
      menuType: MENU_TYPE_MAP,
      tagTypeMap: {
        0: 'success',
        1: '',
        2: 'warning'
      },
      currentFormData: null
    }
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    addMenu() {
      this.currentFormData = null;
      this.$refs['menuEditFormRef'].show();
    },
    getTableData() {
      GetMenuList().then(res => {
        if (res.code === 200) {
          this.tableData = res.data;
        }
      })
    },
    editMenu(menu) {
      this.currentFormData = menu;
      this.$refs['menuEditFormRef'].show();
    },
    deleteMenu(menu) {
      this.$confirm('确定删除当前菜单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DelMenu({ ids: menu.id }).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getTableData();
          }
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .menu-manage-page{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .header-box{
      width: 100%;
      background-color: #fff;
      padding: 10px 15px;
      ::v-deep .el-form-item{
        margin-right: 30px;
        .el-form-item__label{
          font-family: "Microsoft YaHei";
          color: #333
        }
      }
    }
    .table-container{
      width: 100%;
      flex: 1;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      .table-box {
        width: 100%;
        overflow: hidden;
        overflow-y: auto;
        flex-grow: 1;
      }
    }
  }
</style>
